<template>
  <div class="all">
    <div class="title">
      <div style="display: flex">
        <div>{{ title }}</div>
        <el-popover
          placement="top-start"
          title="标题"
          width="350"
          trigger="hover"
          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
        >
          <svg slot="reference" class="icon" aria-hidden="true">
            <use xlink:href="#icon-wenhao1"></use>
          </svg>
        </el-popover>
      </div>
      <div>
        <el-button v-if="canConfirm && editId && roles.includes('ToolAppearReview')" type="success" icon="el-icon-circle-check" @click="examine">{{ $t('button.verify') }}</el-button>
        <el-button type="primary" icon="el-icon-back" @click="goBack">返回</el-button>
        <el-button v-if="roles.includes('ToolAppearDelete')" type="danger" icon="el-icon-delete" @click="delBtn">{{ $t('button.delete') }}</el-button>
        <el-button v-if="roles.includes('ToolAppearUpdate')" type="primary" icon="el-icon-document-checked" @click="submitForm('form')">保存</el-button>
      </div>
    </div>
    <div class="detail-mid">
      <el-form ref="form" v-loading="loading" :model="data" inline :rules="rules">
        <el-row>
          <el-col :span="4">
            <el-form-item :label="$t('app.tool.appear.coding')" prop="coding">
              <el-input v-model="data.coding" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.tool.appear.name')" prop="name">
              <el-input v-model="data.name" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.status')" prop="status">
              <SelfSelect v-model="data.status" :show-list="appearsStatus" disabled :clearable="false" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.tool.appear.apply_admin')" prop="apply_admin_id">
              <Selects v-model="data.apply_admin_id" action="adminList" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.tool.appear.apply_class')">
              <el-input v-model="data.apply_class" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.tool.appear.workshop')" prop="workshop_id">
              <Selects v-model="data.workshop_id" action="factoryList" :query="{ category: 2 }" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.tool.appear.store')" prop="store_id">
              <Selects v-model="data.store_id" action="storeList" :query="{ kind: 2 }" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.tool.appear.source')" prop="type">
              <SelfSelect v-model="data.type" :show-list="toolAppearType" />
            </el-form-item>
          </el-col>
          <el-col v-if="editId && data.status === 2" :span="4">
            <el-form-item :label="$t('app.tool.appear.verifyAdmin')">
              <el-input v-model="data.verify_admin" clearable readonly />
            </el-form-item>
          </el-col>
          <el-col v-if="editId && data.status === 2" :span="4">
            <el-form-item :label="$t('app.tool.appear.verifyTime')">
              <el-input v-model="data.verify_time" clearable readonly />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.sort')" prop="sort">
              <el-input v-model="data.sort" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-if="!editId" class="detail-bottom">
      <el-tabs>
        <el-tab-pane :label="$t('app.description')">
          <div style="width: 100%;padding: 2px">
            <TinyMce id="edit" v-model="data.content" :height="250" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div v-if="editId" class="detail-bottom">
      <el-tabs>
        <el-tab-pane :label="$t('app.tool.appear.toolList.name')">
          <div class="detail-table">
            <el-table ref="multipleTable" tooltip-effect="dark" width="100%" :data="data.tool_list">
              <el-table-column :label="$t('app.tool.appear.toolList.toolName')" align="left" min-width="25%">
                <template slot-scope="scope">
                  <Selects v-show="scope.$index === cellIndex" v-model="editToolId" action="toolList" :query="{ add_field: 'coding' }" style="width: 60%" />
                  <p v-show="scope.$index !== cellIndex">{{ scope.row.name }}</p>
                </template>
              </el-table-column>
              <el-table-column :label="$t('app.tool.appear.toolList.toolNumber')" align="left" min-width="21%">
                <template slot-scope="scope">
                  <el-input v-show="scope.$index === cellIndex" v-model="editNumber" clearable style="width: 60%" />
                  <p v-show="scope.$index !== cellIndex">{{ scope.row.number }}</p>
                </template>
              </el-table-column>
              <el-table-column :label="$t('app.tool.appear.toolList.getTime')" align="left" min-width="20%">
                <template slot-scope="scope">
                  <p>{{ scope.row.get_time }}</p>
                </template>
              </el-table-column>
              <el-table-column :label="$t('app.handle')" align="left" min-width="32%">
                <template scope="scope">
                  <div v-if="data.status === 1">
                    <el-button v-if="scope.$index !== cellIndex" size="small" type="text" @click="editTable(scope)">{{ $t('button.edit') }}</el-button>
                    <el-button v-else size="small" type="text" @click="saveTable(scope)">保存</el-button>
                    <el-button v-if="scope.$index !== cellIndex" class="delBtn" type="text" size="small" @click="toolDel(scope.row.id)">{{ $t('button.delete') }}</el-button>
                    <el-button v-else size="small" type="text" @click="cancelTable(scope)">取消</el-button>
                  </div>
                  <div v-else>
                    <span>-</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-form :model="data" inline>
              <el-row v-if="canConfirm" style="padding-top: 18px" class="input" :gutter="15">
                <el-col :span="6">
                  <el-form-item>
                    <Selects v-model="data.tool_list.id" action="toolList" :query="{ add_field: 'coding' }" />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item>
                    <el-input v-model="data.tool_list.number" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item>
                    <el-input v-model="data.tool_list.get_time" clearable disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-button icon="el-icon-upload2" @click="toolSubmit" />
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('app.description')">
          <el-row v-if="editId" :gutter="20" style="padding: 2px">
            <el-col :span="4">
              <div>
                <p>{{ $t('app.createTime') }}</p>
                <el-input v-model="data.create_time" readonly />
              </div>
              <div>
                <p>{{ $t('app.createAdmin') }}</p>
                <el-input v-model="data.create_admin" readonly />
              </div>
              <div v-if="data.update_time">
                <p>{{ $t('app.updateTime') }}</p>
                <el-input v-model="data.update_time" readonly />
                <p>{{ $t('app.updateAdmin') }}</p>
                <el-input v-model="data.update_admin" readonly />
              </div>
            </el-col>
            <el-col :span="16">
              <TinyMce v-model="data.content" />
            </el-col>
            <el-col class="upload" :span="4">
              <Adjunct :pk="editId" table="toolAppear" />
            </el-col>
          </el-row>
          <el-row v-if="!editId" :gutter="20" style="padding: 2px">
            <el-col :span="24">scope
              <TinyMce v-model="data.content" />
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import API from '@/api/tool/toolAppear'
import SelfSelect from '@/components/select-o'
import Selects from '@/components/select-search'
import TinyMce from '@/components/Tinymce/index'
import Adjunct from '@/components/Upload/adjunct'
import { appearsStatus, toolAppearType } from '@/utils/option'
import { mapGetters } from 'vuex'
export default {
  inject: ['goUrl', 'isEdit', 'add', 'update', 'reload'],
  components: {
    SelfSelect,
    Selects,
    TinyMce,
    Adjunct
  },
  data() {
    return {
      data: {
        status: 1,
        sort: 100
      },
      cellIndex: null,
      editNumber: null,
      editToolId: null,
      editId: null,
      title: '',
      loading: true,
      canConfirm: false,
      appearsStatus,
      toolAppearType,
      rules: {
        coding: { required: true, message: '请输入编号', trigger: 'change' },
        name: { required: true, message: '请输入名称', trigger: 'change' },
        store_id: { required: true, message: '请选择仓库', trigger: 'change' },
        sort: { required: true, message: '请输入排序', trigger: 'change' },
        type: { required: true, message: '请选择类型', trigger: 'change' },
        workshop_id: { required: true, message: '请选择车间', trigger: 'change' },
        apply_admin_id: { required: true, message: '请选择领取人', trigger: 'change' }
      }
    }
  },
  created() {
    const edit = this.isEdit()
    if (edit) {
      this.title = this.$t('route.tool.appear.detail')
      this.editId = edit
      this.info()
    } else {
      this.title = this.$t('route.tool.appear.create')
      this.loading = false
    }
  },
  computed: {
    ...mapGetters(['roles'])
  },
  methods: {
    goBack() {
      this.$router.push('/tool/appear')
    },
    info() {
      API.getOne(this.editId).then(res => {
        this.data = res.data
        this.grant()
        this.loading = false
      }).finally(() => {
        this.loading = false
      })
    },
    delBtn() {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id = this.editId
        API.delete(id).then(res => {
          if (res.data.error_code !== 1) {
            this.$message.error(res.data.message)
          } else {
            this.$message.success('删除成功')
            this.goBack()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    submitForm() {
      if (this.editId) {
        this.update(API, this.data, this.$refs['form'], '/tool/appear')
      } else {
        this.add(API, this.data, this.$refs['form'], '/tool/appear/edit/')
      }
    },
    partsSubmit() {
      const partsData = {
        appear_id: this.editId,
        parts_id: this.data.parts_list.parts_id,
        number: this.data.parts_list.number
      }
      API.append(partsData).then(res => {
        if (res.data.error_code === 1) {
          this.$message.success('新增成功')
          this.info()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    partsDel(id) {
      API.remove(id).then(res => {
        if (res.data.error_code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success('删除成功')
        }
      }).finally(() => {
        this.reload()
      })
    },
    examine() {
      this.data.status = 2
      const params = {
        id: this.editId,
        status: 2
      }
      API.review(params).then(res => {
        if (res.data.error_code === 1) {
          this.$message({
            message: '审核成功',
            type: 'success'
          })
          this.$router.push('/tool/appear')
        } else {
          this.$message.error('审核失败，请联系管理员')
        }
      })
    },
    toolSubmit() {
      const toolData = {
        appear_id: this.editId,
        tool_id: this.data.tool_list.id,
        number: this.data.tool_list.number
      }
      API.append(toolData).then(res => {
        if (res.data.error_code === 1) {
          this.$message.success('新增成功')
          this.info()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    editTable({ $index, row }) {
      // 获取当前点击行下标
      console.log(row)
      this.cellIndex = $index
      this.editNumber = row.number
      this.editToolId = row.id
      console.log(this.editToolId)
    },
    cancelTable() {
      this.cellIndex = null
      this.info()
    },
    saveTable({ row }) {
      this.cellIndex = null
      const toolData = {
        appear_id: this.editId,
        id: row.id,
        tool_id: this.editToolId,
        number: this.editNumber
      }
      API.edit(toolData).then(res => {
        if (res.data.error_code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success('更新成功')
        }
      }).finally(() => {
        this.reload()
      })
    },
    toolDel(id) {
      API.remove(id).then(res => {
        if (res.data.error_code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success('删除成功')
        }
      }).finally(() => {
        this.reload()
      })
    },
    grant() {
      if ([1].includes(this.data.status)) {
        this.canConfirm = true
      }
    }
  }
}
</script>

<style scoped>
.input clearables{
  display: flex;
  justify-content: space-between;
  margin: 14px 0 8px;
}
</style>
